<template>
  <div ref="contRef" :style="{ width: width, height: height }"></div>
</template>

<script setup lang="ts">
  import { watch, type Ref } from 'vue'
  import { onMounted, ref } from "@vue/runtime-core";

  import useEchart from '@/hooks/useEchart'
  const props = defineProps({
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '100%'
    },
    chartData: {
      type: Array,
      default: () => []
    },
    getOption: {
      type: Function,
      default: () => function(){}
    }
  })

  const contRef: Ref = ref(null)
  let chart: any = null

  onMounted(() => {
    setupChart(props.chartData)
  })
  watch(() => props.chartData, (newVal) => {
    setupChart(newVal)
  })

  const setupChart = (data) => {
    if(!chart) {
      chart = useEchart(contRef.value)
    }
    const option = props.getOption(data)
    chart.setOption(option)
  }
</script>

<style scoped>

</style>